<template>
	<view>
		<view class="tab_bar">
			<!--tabBar分割线-->
			<view class="parting_line"></view>
			<view class="bar_item">
				<view class="item" @click="selectMethod(0)">
					<image class="backdrop" :src="isSelect(0) ? formaldehydeUrl.select : formaldehydeUrl.notSelect"
						style="height:50rpx; width: 50rpx;" />
					<view style="height: 20rpx;"></view>
					<view style="font-size: 25rpx;" :class="{active: isSelect(0)}">测甲醛</view>
				</view>
				<view class="item" @click="selectMethod(1)">
					<image class="backdrop"
						:src="isSelect(1) ? formaldehydeRemovalUrl.select : formaldehydeRemovalUrl.notSelect"
						style="height:50rpx; width: 40rpx;" />
					<view style="height: 20rpx;"></view>
					<view style="font-size: 25rpx;" :class="{active: isSelect(1)}">除甲醛</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "bar",
		data() {
			return {
				formaldehydeUrl: {
					select: "../../static/mecha/tab_bar/formaldehyde.png",
					notSelect: "../../static/mecha/tab_bar/formaldehyde_no.png"
				},
				formaldehydeRemovalUrl: {
					select: "../../static/mecha/tab_bar/Formaldehyde_removal.png",
					notSelect: "../../static/mecha/tab_bar/Formaldehyde_removal_no.png"
				},
				coverViewStyle: {
					top: 0,
					left: 0,
					width: '100%',
					height: '100%',
					backgroundColor: 'rgba(0, 0, 0, 0.8)',
					zIndex: 2147483647
				}
			};
		},
		methods: {
			//当前的tabBar是否被选中
			isSelect(index) {
				return this.vuex_nav_index == index;
			},

			//选择tabBat
			selectMethod(index) {
				this.$u.vuex('vuex_nav_index', index)
				if (index == 0) {
					uni.switchTab({
						url: '/pages/detection/detection',
						fail: (e) => {
							console.log(e);
						}
					});
				} else {
					uni.switchTab({
						url: '/pages/formaldehydeRemoval/formaldehydeRemoval',
						fail: (e) => {
							console.log(e);
						}
					});
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		color: #BC9C5E;
	}

	.tab_bar {
		position: fixed;
		bottom: 0;
		z-index: 999;
		height: 150rpx;
		width: 100vh;
		background: #353535;

		.parting_line {
			position: absolute;
			width: 1rpx;
			height: 150rpx;
			background: #181818;
			bottom: 0rpx;
			left: 372rpx;
		}

		.bar_item {
			position: absolute;
			bottom: 10rpx;
			z-index: 999;
			display: flex;

			.item {
				width: 375rpx;
				height: 120rpx;
				display: flex;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: white;

				.f-15 {
					font-size: 15rpx;
				}
			}
		}

	}
</style>